<template>
  <div class="app-container">
    <el-button @click="handelXlsx">导出xlsx</el-button>
    <el-card class="box-card">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column
          v-for="(v, i) in column"
          :key="v"
          :prop="'xlsx' + i"
          :label="v"
        >
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {exportXlsx} from './api/index'

export default {
  data() {
    return {
      data: [
        {xlsx0: "学号", xlsx1: "姓名"},
        {xlsx0: "2020031004", xlsx1: "陈亮星"},
        {xlsx0: "2020031005", xlsx1: "程宜思"},
        {xlsx0: "2020031006", xlsx1: "丁索"},
        {xlsx0: "2020031007", xlsx1: "范俊"},
        {xlsx0: "2020031008", xlsx1: "冯博"},
      ],
      column: [],
      tableData: [],
    };
  },
  created() {
    var temp = this.data.slice(0, 1)[0];
    for (const key in temp) {
      this.column.push(temp[key]);
    }
    this.tableData = this.data.slice(1, -1);
  },
  methods: {
    handelXlsx() {
      console.log(this.data);
      exportXlsx(this.data).then(x => {
        if (x.data.code) {
          window.location.href = 'http://api.nuzn.cn/' + x.data.data
        }
      })
    },
  },
};
</script>
